<template>
    <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
        :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
        :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
        <UploadView v-model:value="field.options.defaultValue"  @fileChange="onFilesChange" :field="field" />
    </form-item-wrapper>
</template>

<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import i18n, { translate } from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { generateId } from "@/utils/util";
import UploadView from "@/components/ZHLX-Components/ZHLX-uploadView/index.vue";

export default {
    name: "file-list-widget",
    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
    mixins: [emitter, fieldMixin, i18n],
    props: {
        field: Object,
        parentWidget: Object,
        parentList: Array,
        indexOfParentList: Number,
        designer: Object,

        designState: {
            type: Boolean,
            default: false
        },

        subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
            type: Number,
            default: -1
        },
        subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
            type: Number,
            default: -1
        },
        subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
            type: String,
            default: ''
        },

    },
    components: {
        FormItemWrapper,
        UploadView,
    },
    data() {
        return {
            oldFieldValue: null, //field组件change之前的值
            fieldModel: null,
            rules: [],
            widgetKey: '',
        }
    },
    computed: {
        allowDefaultFirstOption() {
            return !!this.field.options.filterable || !!this.field.options.remote
        },

        remoteMethod() {
            if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
                return this.remoteQuery
            } else {
                return undefined
            }
        },

        selectKey() {
            return this.widgetKey || this.field.id
        },

    },
    beforeCreate() {
        /* 这里不能访问方法和属性！！ */
    },

    created() {
        /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
           需要在父组件created中初始化！！ */
        this.registerToRefList()
        this.initOptionItems()
        this.initFieldModel()
        this.initEventHandler()
        this.buildFieldRules()

        this.handleOnCreated()
    },

    mounted() {
        this.handleOnMounted()
        console.log(this.field.options.defaultValue);
    },

    beforeUnmount() {
        this.unregisterFromRefList()
    },

    methods: {
        /**
         * 获取选中项label
         * @return {*}
         */
        getSelectedLabel() {
            return this.$refs.fieldEditor.selectedLabel
        },

        refreshWidgetKey() {  //强制刷新组件！！
            this.widgetKey = 'select-key-' + generateId()
        },
        onFilesChange(val) {
            console.log(val);
            // if (Array.isArray(val) && (!val || !val.length)) {
            //     return
            // }
            this.syncUpdateFormModel(val);
            this.field.options.defaultValue = val;
            this.dispatch('VFormRender', 'fieldValidation', [this.getPropName()])
        },
    }
}
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss";
/* form-item-wrapper已引入，还需要重复引入吗？ */

.full-width-input {
    width: 100% !important;
}
</style>